/*
 * @Date: 2023-12-12 16:19:15
 * @LastEditors: lyx
 * @LastEditTime: 2024-03-20 09:05:02
 * @FilePath: \taro-template3\src\packageA\pages\index\index.tsx
 * @Description:
 */
import { ScrollView, View, Block, Button } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import CustomNav from "@/components/CustomNav";
import CustomFooter from "@/components/CustomFooter";
import MsgContent from "@/components/MsgContent";
// import { useIntl } from "react-intl";
import { useGlobalData } from "@/store/app";
import "./index.scss";
import {
  CHAT_SCROLL_VIEW_BOTTOM_FIXATION,
  ChatContext,
  IndexContext,
  useChatContextProvider,
} from "../../../pages/index/hooks/store";
import styles from "./index.module.scss";
import useIndex from "../../../pages/index/hooks/useIndex";
import { useContext, useState } from "react";
import { connect } from "react-redux";
import { clear as clearAuth } from "@/store/reducers/user";
import { ArrowCircleDown } from "@nutui/icons-react-taro";
import BaseOverlay from "@/components/BaseOverlay";
import { Toast } from "@nutui/nutui-react-taro";
import { goToPage } from "@/utils/common";
import { loginout } from "@/lib/auth";
import ChatEcharts from "@/packageA/components/ChatEcharts";

const Index = ({ user }) => {
  // const { auth = {}, userInfo = {} } = user || {};
  // console.log("Index user auth", auth);
  // console.log("Index user userInfo", userInfo);

  const indexInst = useIndex();
  const chatContextInst = useChatContextProvider({ ...indexInst });
  const global = useGlobalData();
  const { talkLists, selectTalk, updateTask, onHandleChangeTalk, overlayVisible } = chatContextInst;
  const {
    systemInfo = {},
    systemInfo: { statusBarHeight = 0, navbarHeight = 0 },
  } = global;

  const default_option = {
    "title": {
      "left": "center",
      "textStyle": {
        "fontSize": 18,
        "color": "black"
      }
    },
    "tooltip": {
      "trigger": "axis",
      "axisPointer": {
        "type": "shadow"
      }
    },
    "legend": {
      "top": "30",
      "data": [
        "电（/滨化集团/基础化工生产基地/生产一部/化工氯碱)"
      ]
    },
    "grid": {
      "top": "18%",
      "left": "3%",
      "right": "4%",
      "bottom": "3%",
      "containLabel": true
    },
    "xAxis": {
      "type": "category",
      "data": [
        "2024-03-12 00:00:00",
        "2024-03-13 00:00:00",
        "2024-03-14 00:00:00",
        "2024-03-15 00:00:00",
        "2024-03-16 00:00:00",
        "2024-03-17 00:00:00",
        "2024-03-17 23:59:59"
      ]
    },
    "yAxis": [
      {
        "type": "value"
      }
    ],
    "series": [
      {
        "name": "电（/滨化集团/基础化工生产基地/生产一部/化工氯碱)",
        "type": "line",
        "yAxisIndex": 0,
        "data": [
          {
            "value": 15558390.631301,
            "unit": "KWh"
          },
          {
            "value": 15637501.758352,
            "unit": "KWh"
          },
          {
            "value": 15602598.281695,
            "unit": "KWh"
          },
          {
            "value": 15606631.765026,
            "unit": "KWh"
          },
          {
            "value": 15575167.450365,
            "unit": "KWh"
          },
          {
            "value": 15975479.262729,
            "unit": "KWh"
          },
          {
            "value": 16102153.425452,
            "unit": "KWh"
          }
        ]
      }
    ]
  };

  useDidShow(() => {
    // getData();
  });

  return (
    <IndexContext.Provider value={{ ...indexInst }}>
      <ChatContext.Provider value={{ ...chatContextInst }}>
        {/* <ChatContextProvider> */}

        <View className="nutui-react-demo">
          <BaseOverlay visible={overlayVisible} text="语音合成中。。。" />
          <Toast id="chat-toast" />

          <CustomNav
            selectTalk={selectTalk}
            talkLists={talkLists}
            onHandleChangeTalk={onHandleChangeTalk}
            updateTask={updateTask}
          />


          <View className="nutui-react-demo__main">
            <ScrollView
              id="chat-content-box"
              scrollWithAnimation
              className={styles["chat-scroll-box"]}
              style={{
                // 底部 + 头部 TODO: 180和回到底部一样 魔法数字 这个需要确定值
                maxHeight: `calc( 100vh - ${Taro.pxTransform(180)} - ${statusBarHeight + navbarHeight
                  }px )`,
              }}
              scrollY
              scrollTop={indexInst.scrollRef.current}
              onScroll={indexInst.onScroll}
              onScrollToLower={() => {
                indexInst.onScrollToLower();
              }}
              scrollIntoView={indexInst.scrollIntoView}
            >
              {/* <View className="index">
                {intl.formatMessage({ id: "LANGUAGE" })}
              </View> */}

              {/* <View onClick={() => goToPage("/sub_common/pages/auth/index")}>
                页面跳转
              </View>

              <Button type="danger" onClick={() => loginout()}>
                退出登录
              </Button> */}

              {/* <ChatEcharts option={default_option}></ChatEcharts> */}

              <MsgContent />

              {/* {getIntl("LANGUAGE")} */}

              {/* 底部定位 */}
              <View
                id={CHAT_SCROLL_VIEW_BOTTOM_FIXATION}
                className={styles["chat-scroll-view-bottom-fixation"]}
              ></View>
            </ScrollView>
          </View>

          {/* 回到底部 */}
          <Block>
            {indexInst.showBack && (
              <View
                className={styles["back-bottom"]}
                onClick={indexInst.scrollToBottom}
              >
                <ArrowCircleDown size="1.5rem" />
              </View>
            )}
          </Block>

          <CustomFooter />
        </View>
        {/* </ChatContextProvider> */}
      </ChatContext.Provider>
    </IndexContext.Provider >
  );
};

export default connect(
  ({ user }: any) => ({
    user,
  }),
  (dispatch: any) => ({
    clearAuth() {
      dispatch(clearAuth());
    },
  })
)(Index) as any;
